<template>
    <div>
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <div class="column column1" style="padding-bottom: 0;">
        <header>
            <h1 class="article-content-title">{{audiodata.name}}</h1>
            <div class="dy_all">
                <router-link  :to="{name: 'Index', params: {channelid: audiodata.channelId}}" style="text-decoration: none;">
                    <div class="dy_tx fl"><a href="javascript:void(0)" class="nickname YFout"> <img :src="audiodata.hostUserIcon"></a></div>
                </router-link>
                <div style="position: relative;">
                    <router-link  :to="{name: 'Index', params: {channelid: audiodata.channelId}}" style="text-decoration: none;">
                        <div>
                            <div class="dy_link" style="vertical-align: middle;">
                                <div class="original_link">
                                    <a href="javascript:void(0)" class="nickname YFout">
                                        {{audiodata.channelName}}
                                    </a>
                                </div>
                            </div>
                            <div class="date db" style="display: inline-block;vertical-align: middle;font-size: 12px;" id="mydate"> {{toFullCommonTime(audiodata.displayTime)}}</div>
                            <div style="display: inline-block;margin-left: 5px;"><img id="articlePvImg" style="vertical-align: middle;width:12px;height:12px;" src="../../assets/libs/atic/view_icon.png" ><span id ="articlePv" class="article_pv">{{audiodata.viewCount}}</span> </div>
                        </div>
                    </router-link>
                    <!--  add by jack on 2017/03/24 -->
                    <div id="subscribe" @click="openAppchannel">订阅</div>
                    <!--  end add -->
                </div>
            </div>

        </header>

        <article class="article-detail mt20">
            <div class="article-relevance" v-if="audiodata.stills">
                <img style="width: 100%; height: auto !important;" id="stillsImg" :src="audiodata.stills">
            </div>
            <div id="chargeMsgNotInApp" class="charge_msg_not_in_app"  v-if="audiodata.isCharge==1">
                <span>本音频需付费收听</span>
                <div class="div_to_album">
                    <div class="go_to_album"><router-link :to="{name: 'Album', params: {albumid:audiodata.albumId}}">进入专辑 ></router-link></div>
                    <div class="buy_this_album" @click="openapp2">购买此专辑</div>
                </div>
            </div>
            <section style="text-align: center;" v-if="audiodata.isCharge!=1">
                <audio style="margin-top:10px;width: 100%;" controls="" loop="" controlslist="nodownload" :src="audiodata.playUrl" id="audio_play"></audio>
            </section>
            <div class="mt10"></div>
            <div class="article-detail-inner article-relevance ov" id="article-inner">

            </div>
            <div class="mt10"></div>
            <div class="article-relevance" v-html="audiodata.content">
            </div>
        </article>
        </div>
        <div id="wrapper" style="padding-top: 0;">

            <ul id="otherinfo" class="album-list-audio" v-if="abluminfo.totalCount>0&& audiodata.isCharge!=1">
                <li class="album-item-audio" v-for="(item,index) in abluminfo.rows">
                    <Listaudiosmall :info="item"></Listaudiosmall>
                </li>
                <div class="clearBoth"></div>
            </ul>
            <div class="page-container" @click="getOtherContents()" v-if="abluminfo.totalCount>0&& audiodata.isCharge!=1">{{loadMore2}}<span class="down-arrow"></span></div>
            <channel v-if="JSON.stringify(channelInfo)!=='{}'" :info="channelInfo"></channel>
          <!--  <div class="greyChannel"></div>-->
            <remarknew  :topicid="topicid" :reportData="commentReportData" :onTop="onTop" :comtype="'commnet'"
                        @change3="getCounter" :isRealtime="isRealtime" :maxcount="2"></remarknew>
            <btn text="去「扬帆App」参与讨论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
        <div id="relatedinfo">
            <!-- 其它相关视频专用左文右图组件 -->

                 <listvideosmall v-for="item in contentList.rows" :info="item" v-if="contentList.totalCount>0&&item.content.resourceType==1"></listvideosmall>
                <listaudiosmall2 v-for="item in contentList.rows" :info="item" v-if="contentList.totalCount>0&&item.content.resourceType==2"></listaudiosmall2>

            <div class="page-container" @click=" getContents()">{{loadMore}}<span class="down-arrow"></span></div>

        </div>

        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    import "../../assets/libs/atic/common.css"
    import "../../assets/libs/atic/show.css"
    import "../../assets/libs/atic/style.new.css"

    export default {
        components: {
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve)
            },
            Listvideosmall: function (resolve) {
                require(["../../components/list_video_small.vue"], resolve)
            },
            listaudiosmall2: function (resolve) {
                require(["../../components/list_audio_small2.vue"], resolve)
            },
            Listaudiosmall: function (resolve) {
                require(["../../components/list_audio_small.vue"], resolve);
            },
            Channel: function (resolve) {
                require(["../../components/channel.vue"], resolve);
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve)
            },
        },
        data:function(){
            return {
                jhb_info:{
                    contentId:this.$route.params.audioId,
                    contentType:24
                },
                channelInfo:{},
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                callApp: {
                    contentType: 9,
                    contentParam: this.$route.params.audioId,
                    infoParams:{
                        channelid:"",
                        channelname:"",
                        url:"",
                        type:"audio"
                    }
                },
                audiodata:{},
                page: 1,
                pageSize: 5,
                loadMore: "加载更多",
                loadMore2:"加载更多",
                canLoadMore: true,
                canLoadMore2: true,
                contentList: {
                    rows: [],
                    style: 0,
                    totalCount: 0
                },
                abluminfo:{
                        totalCount: 0,
                        rows: []
                },
                page2: 1,
                pageSize2: 5,
                topicid:"",
                commentReportData:{},
                onTop: true,
                isRealtime:false,
                remarkNum:0,
                isCounter:true,
            }
        },
        mounted:function(){
            let that = this;


            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getVideoDetail",
                qs.stringify({
                    params: JSON.stringify({
                        videoId: this.$route.params.audioId,
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                //404
                if (response.data.state != 1000){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }

                that.audiodata=response.data.data;
                that.callApp.infoParams.channelid=response.data.data.channelId;
                that.callApp.infoParams.channelname=response.data.data.channelName;
                that.callApp.infoParams.url=response.data.data.modelUrl;

                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? that.audiodata.shareTitle : "音频不存在",
                    content: !(response.data.state == 2056) ? that.audiodata.shareContent : "音频不存在",
                    name: !(response.data.state == 2056) ? that.audiodata.name : "音频不存在"
                };
                // console.log(meta);
                that.createMetaInfo(meta);
                that.freshTitles(!(response.data.state == 2056) ? that.audiodata.shareTitle : "音频不存在");




                // 二次分享
                that.initShareConfig = initShareConf(
                    that.audiodata.shareTitle,
                    that.audiodata.shareContent,
                    that.audiodata.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        opertime: that.toFullTime(),
                        imei: "",
                        openid: "",
                        ip: "",
                        channelid: that.$route.params.channelid,
                        contentid: that.$route.params.videoid,
                        name: that.audiodata.name,
                        contenttype: "audio",
                        type: "audio_1",
                        tagid: "",
                        extendtag: "",
                        sharetype: "weixin",
                        shareurl: window.location.href
                    }
                );

                if(response.data.data.albumId){
                   that.getOtherContents();
                }
                if (that.audiodata.channelId!="") {
                    this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                        qs.stringify({
                            "params": JSON.stringify({"channelId": that.audiodata.channelId}),
                            "apiVersion": process.env.VUE_APP_SERVER_VER
                        })
                    ).then((response3) => {
                        that.channelInfo = response3.data.data;
                    });
                }
                if(that.audiodata.isCharge!=1){
                    setTimeout(function(){
                        // 监听播放事件：获取对象
                        let media = document.getElementById("audio_play");
                        // console.log(media);
                        // 触发计时器
                        let goTimer = function () {
                            if (that.isCounter) {
                                that.sTime = Math.round(new Date().getTime() / 1000);
                                that.isCounter = false;
                                doPlay();
                            }
                        };
                        media.addEventListener("play", goTimer, false);
                        // 触发观看视频play行为
                        function doPlay() {
                            let actionType = "play";
                            let behaviorData = {
                                uid: "",
                                username: "",
                                ip: "",
                                openid: "",
                                contentid: that.$route.params.audioId,
                                playurl: that.audiodata.playUrl,
                                imei: "",
                                name: that.audiodata.name,
                                extendtag: "",
                                contenttype: "audio",
                                type: "audio_1",
                                opertime: that.toFullTime(),
                                channelid:  response.data.data.channelId,
                            };
                            shareUrlReport(behaviorData, actionType);
                        }

                    },500)
                }



                that.topicid=response.data.data.topicid;
                that.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: response.data.data.tagId,
                    contentid: that.$route.params.audioId,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: response.data.data.name,
                    extendtag: "",
                    type: "audio_1",
                    contenttype: "audio",
                    opertime:that.toFullTime(),
                    channelid: response.data.data.channelId,
                };
                function doAccessaudio() {
                    let actionType = "accessaudio";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "contentid":that.$route.params.audioId,
                        "imei": "",
                        "extendtag": "",
                        "type": "audio_1",
                        "contenttype": "audio",
                        "opertime": that.toFullTime(),
                        "contentname": response.data.data.name,
                        "channelid": response.data.data.channelId,
                        "sharetype": "",
                    };
                    shareUrlReport(behaviorData, actionType);
                }
                doAccessaudio();
            })
            this.getContents();
        },
        methods: {
            openapp2:function(){
             /*   let r=confirm("购买专辑将打开【扬帆】app，确认打开吗?");
                if(r==false){
                    return false;
                }else if(r==true){
                    openDownPage(4,that.audiodata.albumId);
                }
*/


         let that=this;
                that.$dialog.confirm('购买专辑将打开【扬帆】app，确认打开吗?',{
                    okText: '确定',  // 本地化确认按钮文字提示内容
                    cancelText: '取消',  //本地化关闭按钮文字提示内容
                })
                    .then(function () {
                        // 点击确定执行
                        openDownPage(4,that.audiodata.albumId);
                    })
                    .catch(function () {
                        // 点击取消执行
                    });

            },
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            openAppchannel: function () {
              /*  let r=confirm("购买专辑将打开【扬帆】app，确认打开吗?");
                if(r==false){
                    return false;
                }else if(r==true){
                    openDownPage(6, this.callApp.infoParams.channelid);
                }*/
                let that=this;
                that.$dialog.confirm('订阅服务将打开【扬帆】app，确认打开吗?',{
                    okText: '确定',  // 本地化确认按钮文字提示内容
                    cancelText: '取消',  //本地化关闭按钮文字提示内容
                })
                    .then(function () {
                        // 点击确定执行
                        openDownPage(6, that.callApp.infoParams.channelid);
                    })
                    .catch(function () {
                        // 点击取消执行
                        return false;
                    });
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
            openAppAblum:function(){
                openDownPage(4,that.audiodata.albumId);
            },
            getContents: function () {
                this.loadMore = "加载中，请稍候...";
                this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getRelatedVideoList",
                    qs.stringify({
                        params: JSON.stringify({
                            videoId: this.$route.params.audioId,
                            idx: (this.page - 1) * this.pageSize,
                            size: this.pageSize,
                            resourceType:2
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER,
                        modFlag:1
                    })
                ).then((response) => {
                    let responseData = response.data.data;
                    // console.log("**************************");
                    // console.log(JSON.stringify(responseData, undefined, 2));
                    // console.log("**************************");

                    // 进行必要的数据格式转换
                    for (let key in responseData.rows) {
                        responseData.rows[key] = {
                            content: responseData.rows[key]
                        };
                        responseData.rows[key].contentId = responseData.rows[key].content.id;
                        responseData.rows[key].type = 5;
                    }

                    this.contentList.style = responseData.style;
                    this.contentList.totalCount = responseData.totalCount;
                    if (this.canLoadMore)
                        this.contentList.rows = this.contentList.rows.concat(responseData.rows);
                    this.page++;
                    if ((this.page - 1) * this.pageSize >= responseData.totalCount) {
                        this.loadMore = "已经加载全部";
                        this.canLoadMore = false;
                        $(".down-arrow").hide();
                    } else {
                        this.loadMore = "加载更多";
                    }
                    // console.log("**************************");
                    //  console.log(JSON.stringify(this.contentList, undefined, 2));
                    // console.log("**************************");
                });
            },
            getOtherContents:function(){
                let that=this;
                that.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getAlbumContentList",
                    qs.stringify({
                        params: JSON.stringify({
                            albumId: that.audiodata.albumId,
                            detailTag: 1,
                            idx: (that.page2 - 1) * that.pageSize2,
                            size: that.pageSize2,
                            sortOrder:0,
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
                ).then((response2) => {
                    that.abluminfo.totalCount=response2.data.data.rows.length;
                    let responseData=response2.data.data;
                    if (responseData.rows.length > 0) {
                        // 做一些必要的数据格式转换
                        for (let key in responseData.rows) {
                            responseData.rows[key] = {
                                content: responseData.rows[key]
                            };
                            responseData.rows[key].content.channelId = responseData.albumDetail.channelId;
                            responseData.rows[key].contentId = responseData.rows[key].content.contentId;
                        }
                        that.abluminfo.totalCount = responseData.totalCount;
                        if (that.canLoadMore)
                            that.abluminfo.rows = [];
                        that.abluminfo.rows = responseData.rows;
                        if (that.abluminfo.rows.length >= responseData.totalCount) {
                            that.loadMore2 = "已经加载全部";
                            that.canLoadMore2 = false;
                        } else {
                            that.page2++;
                        }
                    }else{
                        that.loadMore2 = "没有数据";
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .article-relevance img{
        min-height: 10px;
        display:block;
        margin:0 auto;
        width:100%;
    }
    .article_pv {
        font-size: 12px;
        color: #999999;
        margin-left: 6px;
        vertical-align: middle;
    }


    /*add by jack on 2017/03/24*/

    #subscribe{
        /*display:none;*/
        right: 0px;
        top: -4px;
        width: 35px;
        text-align: center;
        position: absolute;
        color: #7056f3;
        border-radius: 27.5px;
        padding: 10px;
        background: #F0EBFD;
        height: 6px;
        line-height: 6px;
    }
    #is_subscribe{
        display:none;
        right: 0px;
        width: 35px;
        text-align: center;
        top: -4px;
        position: absolute;
        color: #B3AFA9;
        border-radius: 27.5px;
        padding: 10px;
        border: 1px solid #EDECEA;
        background: #ffffff;
        height: 6px;
        line-height: 6px;
    }
    .article-relevance .good{
        height:16px;
    }
    .article-relevance .good span{
        line-height: 20px;
        display: block;
        float: left;
        top: 0;
        height: 16px;
        margin-left: 5px;
        font-size: 0.9rem;
        color:#666;
    }

    .article-relevance .good img{
        height: 16px;
        display: block;
        float: left;
        width: 16px;
    }
    .mxh{
        height:600px;
        overflow: hidden;
    }
    .top_b_0{
        border-top:0px solid #ededed !important;
    }
    .column{
        position: relative;
    }
    .column-cover{
        position: absolute;
        bottom: 0;
        width: 100%;
        background: none;
        left:0;
    }
    .column-cover-more{
        width: 100%;
        height:70px;
        background:linear-gradient(rgba(255,255,255,0.35),rgba(255,255,255,1)) ;
        text-align: center;
    }
    .column-cover-more img{
        height:25px;
        position: relative;
        top:40px;
    }
    .column-cover-btn{
        width: 100%;
        height:50px;
        background: #fff;
        padding:15px 0;
    }
    .column-cover-button{
        margin:0 15px;
        background: #9852FF;
        color:#fff;
        font-size: 1rem;
        height:2.6rem;
        line-height: 2.6rem;
        border-radius: 1000px;
        text-align: center;
    }
    .yfh5-plugs_xin  a{
        text-decoration: none;
        color:#444;
    }
    .down-arrow {
        display: inline-block;
        position: relative;
        width: 12px;
        height: 10px;
        margin-right: 10px;
    }

    .down-arrow::after {
        display: inline-block;
        content: " ";
        height: 7px;
        width: 7px;
        border-width: 0 1px 1px 0;
        border-color: #999999;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform-origin: center;
        transition: transform .3s;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -7px;
    }
    .album-list-audio {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .list-video-small-component-item:first-child {
        border-top: 0;
    }
    .article_pv {
        font-size: 12px;
        color: #999999;
        margin-left: 6px;
        vertical-align: middle;
    }
    #subscribe{
        /*display:none;*/
        right: 0px;
        top: -4px;
        width: 35px;
        text-align: center;
        position: absolute;
        color: #7056f3;
        border-radius: 27.5px;
        padding: 10px;
        background: #F0EBFD;
        height: 6px;
        line-height: 6px;
    }
    #is_subscribe{
        display:none;
        right: 0px;
        width: 35px;
        text-align: center;
        top: -4px;
        position: absolute;
        color: #B3AFA9;
        border-radius: 27.5px;
        padding: 10px;
        border: 1px solid #EDECEA;
        background: #ffffff;
        height: 6px;
        line-height: 6px;
    }
    .charge_msg_in_app{
        background-color: #FFEBE3;
        width: 100%;
        height: 40px;
        vertical-align: middle;
        display: none;
    }
    .charge_msg_span_left{
        background-color: #FFEBE3;
        float:left;
        margin-left: 5px;
        display: inline-block;
        line-height: 40px;

    }
    .charge_msg_span_right{
        background-color: #FFEBE3;
        float:right;
        color: #FF4500;
        margin-right: 5px;
        display: inline-block;
        line-height: 40px;
    }
    .charge_msg_not_in_app{
        background-color: #FFEBE3;
        width: 100%;
        height: 40px;
        vertical-align: middle;
    }
    .charge_msg_not_in_app span {
        background-color: #FFEBE3;
        float:left;
        margin-left: 5px;
        font-size: 12px;
        display: inline-block;
        line-height: 40px
    }
    .div_to_album{
        display: inline-block;
        float: right;
        padding-top: 8px;
    }
    .go_to_album{
        font-size: 12px;
        border:1px solid;
        border-radius:10px;
        height:20px;
        width:75px;
        text-align:center;
        vertical-align: middle;
        color: #FF4500;
        display: inline-block;
        line-height: 20px;
        /*float: right;*/
        margin-right: 5px;
    }
    .go_to_album a{
        text-decoration:none;
        color:inherit;
    }
    .buy_this_album{
        font-size: 12px;
        border-radius:10px;
        height:22px;
        width:75px;
        text-align:center;
        vertical-align: middle;
        color: white;
        background-color: #FF4500;
        display: inline-block;
        /*float: right;*/
        margin-right: 5px;
        line-height: 22px;
    }
    .channel-component-container{
     /*   background: #fff;*/
       /* border-top:0;*/
        margin-top: 0;
        padding-top: 0;
    }
</style>